<template>
    <div class="credit">
        <!-- <div class="info">
            驻站员
            <label class="text">{{ info.inStationPerson }}</label> 　录入时间
            <label class="text">{{ info.enterTime }}</label>
        </div> -->
        <div class="title">购车人</div>
        <div>
            <el-row class="info-row" v-show="isEdit == true">
                <el-col :span="3" class="subTitle">
                    姓名
                </el-col>
                <el-col :span="5">
                    <el-input class="info-input" v-model="carBuy.name" :disabled="disabled"></el-input>
                </el-col>
                <el-col :span="3" class="subTitle">
                    身份证号码
                </el-col>
                <el-col :span="5">
                    <el-input class="info-input" v-model="carBuy.code" :disabled="disabled"></el-input>
                </el-col>
                <el-col :span="3" class="subTitle">
                    婚姻状态
                </el-col>
                <el-col :span="5">
                    <el-select class="info-select" @change="marryChanges" v-model="carBuy.marry" placeholder="请选择">
                        <el-option v-for="item in $store.state.marryStatus" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row class="info-row" v-show="isEdit == false">
                <el-col :span="8" class="info-label">
                    姓名：
                    <label class="text">{{carBuy.name}}</label>
                </el-col>
                <el-col :span="8" class="info-label">
                    身份证号码：
                    <label class="text">{{carBuy.code}}</label>
                </el-col>
                <el-col :span="8" class="info-label">
                    婚姻状态：
                    <label class="text">{{carBuy.marryName}}</label>
                </el-col>
            </el-row>
            <el-row class="info-row" v-show="isEdit == true">
                <el-col :span="3" class="subTitle">
                    贷款银行
                </el-col>
                <el-col :span="5">
                    <!-- <el-input class="info-input" v-model="carBuy.bank" icon="search"></el-input> -->
                    <el-autocomplete class="inline-input info-input" v-model="carBuy.bank" :fetch-suggestions="querySearch" placeholder="请输入内容"></el-autocomplete>
                </el-col>
            </el-row>
            <el-row class="info-row" v-show="isEdit == false">
                <el-col :span="8" class="info-label">
                    贷款银行：
                    <label class="text">{{carBuy.bank}}</label>
                </el-col>
            </el-row>
            <el-row class="info-row resultShrink">
                <el-col class="subtitle" :span="3">征信结果</el-col>
                <el-col :span="12" class="text-height text-height-shrink" id="carBuy">
                    {{ carBuy.result }}
                </el-col>
                <el-col :span="3">
                    <el-button class="credit-button-text" type="text" @click="$libs.changeHeight('carBuy', carBuy)">{{ carBuy.shrinkText}}</el-button>
                </el-col>
            </el-row>
            <el-row class="info-row credit-imgs">
                <upload class="upload" ref="carBuy"></upload>
                <!-- <template v-for="vm in carBuy.annexList">
                    <el-col :span="5" class="credit-img-each">
                        <upload class="upload" ref="carBuy"></upload> {{vm.fileDisplayName}}
                    </el-col>
                </template> -->
            </el-row>
        </div>
        <div class="title" v-show="carBuy.marry==1 || carBuy.marry==0">共同购车人</div>
        <div v-show="(carBuy.marry==1 || carBuy.marry==0) && marryChange==false">
            <el-row class="info-row" v-show="isEdit == true">
                <el-col :span="3" class="subTitle">
                    姓名
                </el-col>
                <el-col :span="5">
                    <el-input class="info-input" v-model="carBuyCommon.name" :disabled="disabled"></el-input>
                </el-col>
                <el-col :span="3" class="subTitle">
                    身份证号码
                </el-col>
                <el-col :span="5">
                    <el-input class="info-input" v-model="carBuyCommon.code" :disabled="disabled"></el-input>
                </el-col>
            </el-row>
            <el-row class="info-row" v-show="isEdit == false">
                <el-col :span="8" class="info-label">
                    姓名：
                    <label class="text">{{carBuyCommon.name}}</label>
                </el-col>
                <el-col :span="8" class="info-label">
                    身份证号码：
                    <label class="text">{{carBuyCommon.code}}</label>
                </el-col>
            </el-row>
            <el-row class="info-row resultShrink">
                <el-col class="subtitle" :span="3">征信结果</el-col>
                <el-col :span="12" class="text-height text-height-shrink" id="carBuyCommon">
                    {{ carBuyCommon.result }}
                </el-col>
                <el-col :span="3">
                    <el-button class="credit-button-text" type="text" @click="$libs.changeHeight('carBuyCommon', carBuyCommon)">{{ carBuyCommon.shrinkText}}</el-button>
                </el-col>
            </el-row>
            <el-row class="info-row credit-imgs">
                <!-- <template v-for="vm in carBuyCommon.annexList">
                    <el-col :span="5" class="credit-img-each">
                        <upload class="upload" ref="carBuyCommon"></upload> {{vm.fileDisplayName}}
                    </el-col>
                </template> -->
                <upload class="upload" ref="carBuyCommon"></upload>
            </el-row>
        </div>
        <div v-show="(carBuy.marry==1||carBuy.marry==0) && marryChange==true && isEdit == true" v-for="v in carBuyCommon.carBuyCommonAdd">
            <el-row class="info-row">
                <el-col :span="3" class="subTitle">
                    姓名
                </el-col>
                <el-col :span="5">
                    <el-input class="info-input" v-model="carBuyCommon.name"></el-input>
                </el-col>
                <el-col :span="3" class="subTitle">
                    身份证号码
                </el-col>
                <el-col :span="5">
                    <el-input class="info-input" v-model="carBuyCommon.code"></el-input>
                </el-col>
            </el-row>
            <el-row class="info-row credit-imgs">
                <el-col :span="5" class="credit-img-each">
                    <upload v-show="isEdit" class="upload" ref="carBuyCommon1"></upload> 身份证正面
                </el-col>
                <el-col :span="5" class="credit-img-each">
                    <upload v-show="isEdit" class="upload" ref="carBuyCommon2"></upload>
                    身份证背面
                </el-col>
                <el-col :span="5" class="credit-img-each">
                    <upload v-show="isEdit" class="upload" ref="carBuyCommon3"></upload> 授权书
                </el-col>
                <el-col :span="5" class="credit-img-each">
                    <upload v-show="isEdit" class="upload" ref="carBuyCommon4"></upload> 授权书面签
                </el-col>
            </el-row>
        </div>
        <div class="title" v-show="assurePersons.length > 0">担保人</div>
        <div v-for="(vm , index) in assurePersons">
            <el-row class="info-row" v-show="isAssurePersonAdd==false && isEdit == true">
                <el-col :span="3" class="subTitle">
                    姓名
                </el-col>
                <el-col :span="5">
                    <el-input class="info-input" v-model="vm.name" :disabled="disabled"></el-input>
                </el-col>
                <el-col :span="3" class="subTitle">
                    身份证号码
                </el-col>
                <el-col :span="5">
                    <el-input class="info-input" v-model="vm.code" :disabled="disabled"></el-input>
                </el-col>
            </el-row>
            <el-row class="info-row" v-show="isAssurePersonAdd==true && isEdit == true">
                <el-col :span="3" class="subTitle">
                    姓名
                </el-col>
                <el-col :span="5">
                    <el-input class="info-input" v-model="vm.name"></el-input>
                </el-col>
                <el-col :span="3" class="subTitle">
                    身份证号码
                </el-col>
                <el-col :span="5">
                    <el-input class="info-input" v-model="vm.code"></el-input>
                </el-col>
                <el-col :span="3" class="subTitle">
                    <el-button @click="deleAssurePersons(index)" class="custom-button-minor">删除</el-button>
                </el-col>
            </el-row>
            <el-row class="info-row" v-show="isEdit == false">
                <el-col :span="8" class="info-label">
                    姓名：
                    <label class="text">{{vm.name}}</label>
                </el-col>
                <el-col :span="8" class="info-label">
                    身份证号码：
                    <label class="text">{{vm.code}}</label>
                </el-col>
            </el-row>
            <el-row class="info-row resultShrink" v-show="isAssurePersonAdd==false">
                <el-col class="subtitle" :span="3">征信结果</el-col>
                <el-col :span="12" class="text-height text-height-shrink" :id="'assurePersons' + index">
                    {{ vm.result }}
                </el-col>
                <el-col :span="3">
                    <el-button class="credit-button-text" type="text" @click="$libs.changeHeight('assurePersons'+index, vm)">{{ vm.shrinkText}}</el-button>
                </el-col>
            </el-row>
            <el-row class="info-row credit-imgs" v-show="isAssurePersonAdd==true && isEdit == true && index>=isAssurePersonOld">
                <el-col :span="5" class="credit-img-each">
                    <upload v-show="isEdit" class="upload" :ref="'upload1'+index"></upload> 身份证正面
                </el-col>
                <el-col :span="5" class="credit-img-each">
                    <upload v-show="isEdit" class="upload" :ref="'upload2'+index"></upload>
                    身份证背面
                </el-col>
                <el-col :span="5" class="credit-img-each">
                    <upload v-show="isEdit" class="upload" :ref="'upload3'+index"></upload> 授权书
                </el-col>
                <el-col :span="5" class="credit-img-each">
                    <upload v-show="isEdit" class="upload" :ref="'upload4'+index"></upload> 授权书面签
                </el-col>
            </el-row>
            <el-row class="info-row credit-imgs" v-show="index < isAssurePersonOld">
                <!-- <template v-for="(val,j) in vm.annexList">
                    <el-col :span="5" class="credit-img-each">
                        <upload class="upload" ref="assurePersons"></upload> {{val.fileDisplayName}}
                    </el-col>
                </template> -->
                <upload class="upload" :ref="'assurePersons'+index"></upload>
            </el-row>
        </div>
        <el-button v-show="isEdit == true" class="custom-button-minor credit-button-assure" icon="plus" @click="assurePersonAdd">新增担保人</el-button>
    </div>
</template>
<script>
export default {
    name: 'credit',
    components: {
        upload: require('../../components/other/upload'),
    },
    data() {
        return {
            isEdit: false,
            disabled: true,
            marryChange: false,
            isAssurePersonAdd: false,
            isAssurePersonOld: 0,
            info: {
                inStationPerson: '', //驻站员
                enterTime: '', //录入时间
            },
            carBuy: {
                shrink: false,
                shrinkText: '',
                name: '',
                code: '',
                marry: '',
                bank: '',
                result: '',
                annexList: []
            },
            carBuyCommon: {
                shrink: false,
                shrinkText: '展开全部',
                name: '',
                code: '',
                result: '',
                carBuyCommonAdd: [],
                annexBatchNo: '',
            },
            assurePersons: [],
            orderNo: '',
            group: 3,
            type: 0,
            isOne: true
        }
    },
    methods: {
        querySearch(queryString, cb) {
            // 调用 callback 返回建议列表的数据
            let that = this;
            this.$store.commit('bankOpp', {
                this: that,
                cb: () => {
                    cb(that.$store.state.bankOpp);
                }
            });
        },
        deleAssurePersons(_index) {
            this.assurePersons.splice(_index, 1);
        },
        assurePersonAdd() {
            // 新增担保人
            // if (this.assurePersons && this.assurePersons.length > 0) {
            //     for (var index = 0; index < this.assurePersons.length; index++) {
            //         for (var i = 1; i < 5; i++) {
            //             this.$refs['upload' + i + index][0].isEdit = false;
            //         }
            //     }
            // }

            this.assurePersons.push({
                shrink: false,
                shrinkText: '展开全部',
                name: '',
                code: '',
                result: '',
                img1: '',
                annexBatchNo: ''
            });
            this.$http.post('/annex/').then((data) => {
                if (data.data.success && this.assurePersons && this.assurePersons.length > 0) {
                    for (var index = 0; index < this.assurePersons.length; index++) {
                        let vm = this.assurePersons[index];
                        vm.annexBatchNo = data.data.data.annexBatchNo;
                        for (var i = 1; i < 5; i++) {
                            this.$refs['upload' + i + index][0].isOne = this.isOne;
                            this.$refs['upload' + i + index][0].id = this.assurePersons[index].annexBatchNo;
                            this.$refs['upload' + i + index][0].group = this.group;
                            this.$refs['upload' + i + index][0].type = this.type;
                            switch (i) {
                                case 1:
                                    this.$refs['upload' + i + index][0].fileName = '身份证正面';
                                    break;
                                case 2:
                                    this.$refs['upload' + i + index][0].fileName = '身份证背面';
                                    break;
                                case 3:
                                    this.$refs['upload' + i + index][0].fileName = '授权书';
                                    break;
                                case 4:
                                    this.$refs['upload' + i + index][0].fileName = '授权书面签';
                                    break;
                                default:
                                    break;
                            }
                        }
                    }
                }
            }).catch((error) => {

            });
            this.isAssurePersonAdd = true;
        },
        getCreditInfo(_id, _cb) {
            this.$http.get('/credit/look/' + _id).then((data) => {
                if (data.data.success) {
                    let datas = data.data.data;
                    this.info = {
                        inStationPerson: datas.buyer.handleStaffName, //驻站员
                        enterTime: datas.buyer.recordTime, //录入时间
                    };
                    this.carBuy = {
                        shrink: false,
                        shrinkText: '展开全部',
                        name: datas.buyer.customerName,
                        code: datas.buyer.idCard,
                        marryName: datas.buyer.bemarriedName,
                        marry: datas.buyer.bemarried,
                        bank: datas.buyer.bankName,
                        bankId: datas.buyer.bankId,
                        result: datas.buyer.creditResult,
                        annexList: datas.buyer.annexList,
                        annexBatchNo: datas.buyer.annexBatchNo,
                        creditQueryApplyId: datas.buyer.creditQueryApplyId,
                        customerId: datas.buyer.customerId,
                        customerName: datas.buyer.customerName,
                        customerType: datas.buyer.customerType,
                    };
                    this.$nextTick(() => {
                        if (datas.buyer.annexBatchNo) {
                            this.$refs.carBuy.id = datas.buyer.annexBatchNo;
                            this.$refs.carBuy.group = 1;
                            this.$refs.carBuy.type = 0;
                            this.$refs.carBuy.getFileList(false);
                        }
                    });
                    if (datas.commonBuyer) {
                        this.carBuyCommon = {
                            shrink: false,
                            shrinkText: '展开全部',
                            name: datas.commonBuyer.customerName,
                            code: datas.commonBuyer.idCard,
                            result: datas.commonBuyer.creditResult,
                            annexList: datas.commonBuyer.annexList,
                            annexBatchNo: datas.commonBuyer.annexBatchNo,
                            customerId: datas.commonBuyer.customerId,
                            creditQueryApplyId: datas.commonBuyer.creditQueryApplyId,
                            bankName: datas.buyer.bankName,
                            bankId: datas.buyer.bankId,
                            bemarried: datas.commonBuyer.bemarried,
                            carBuyCommonAdd: []
                        };
                        if (_cb && _cb.carBuyCommon) {
                            _cb.carBuyCommon();
                        }
                        this.$nextTick(() => {
                            this.marryChange = false;
                            if (datas.commonBuyer.annexBatchNo) {
                                this.$refs.carBuyCommon.id = datas.commonBuyer.annexBatchNo;
                                this.$refs.carBuyCommon.group = 2;
                                this.$refs.carBuyCommon.type = 0;
                                this.$refs.carBuyCommon.getFileList(false);
                            }
                        });
                    } else {
                        if (_cb && _cb.carBuyCommonNone) {
                            _cb.carBuyCommonNone();
                        }
                    }
                    if (datas.sponsor && datas.sponsor.length > 0) {
                        this.isAssurePersonOld = datas.sponsor.length;
                        if (_cb && _cb.assurePerson) {
                            _cb.assurePerson();
                        }
                        this.isAssurePersonOld = datas.sponsor.length;
                        this.assurePersons = [];
                        for (let index = 0; index < datas.sponsor.length; index++) {
                            let vm = datas.sponsor[index];
                            this.assurePersons.push({
                                shrink: false,
                                shrinkText: '展开全部',
                                name: vm.customerName,
                                code: vm.idCard,
                                result: vm.creditResult,
                                annexList: vm.annexList,
                                annexBatchNo: vm.annexBatchNo
                            });
                            this.$nextTick(() => {
                                console.log(this.$refs);
                                if (vm.annexBatchNo) {
                                    this.$refs['assurePersons' + index][0].id = vm.annexBatchNo;
                                    this.$refs['assurePersons' + index][0].group = 3;
                                    this.$refs['assurePersons' + index][0].type = 0;
                                    this.$refs['assurePersons' + index][0].getFileList(false);
                                }
                                for (var i = 1; i < 5; i++) {
                                    this.$refs['upload' + i + index][0].isOne = this.isOne;
                                    this.$refs['upload' + i + index][0].id = this.assurePersons[index].annexBatchNo;
                                    this.$refs['upload' + i + index][0].group = 3;
                                    this.$refs['upload' + i + index][0].type = 0;
                                    switch (i) {
                                        case 1:
                                            this.$refs['upload' + i + index][0].fileName = '身份证正面';
                                            break;
                                        case 2:
                                            this.$refs['upload' + i + index][0].fileName = '身份证背面';
                                            break;
                                        case 3:
                                            this.$refs['upload' + i + index][0].fileName = '授权书';
                                            break;
                                        case 4:
                                            this.$refs['upload' + i + index][0].fileName = '授权书面签';
                                            break;
                                        default:
                                            break;
                                    }
                                }
                            });

                        }
                    } else {
                        if (_cb && _cb.assurePersonNone) {
                            _cb.assurePersonNone();
                        }
                    }
                } else {
                    if (_cb.assurePersonNone) {
                        _cb.assurePersonNone();
                    }
                    if (_cb.carBuyCommonNone) {
                        _cb.carBuyCommonNone();
                    }
                }
            }).catch((error) => {

            });
        },
        creditInfoEnter(_id, _isMust, _orderStatus, _cb) {
            let sponsor = [];
            $.each(this.assurePersons, (i, el) => {
                sponsor.push({
                    customerName: el.name,
                    idCard: el.code,
                    orderNo: _id,
                    annexBatchNo: el.annexBatchNo,
                    creditQueryApplyId: '',
                    customerId: el.customerId,
                    customerName: el.name,
                    bankName: this.carBuy.bank,
                    bankId: this.$libs.jsonGetId(this.$store.state.bank, this.carBuy.bank),
                    bemarried: '',
                    customerType: '3',
                });
            });
            let param = {
                buyer: {
                    bemarried: this.carBuy.marry,
                    annexBatchNo: this.carBuy.annexBatchNo,
                    bankName: this.carBuy.bank,
                    orderNo: _id,
                    bankId: this.$libs.jsonGetId(this.$store.state.bank, this.carBuy.bank),
                    creditQueryApplyId: this.carBuy.creditQueryApplyId,
                    customerId: this.carBuy.customerId,
                    customerName: this.carBuy.name,
                    idCard: this.carBuy.code,
                    customerType: this.carBuy.customerType,
                },
                commonBuyer: (this.carBuy.marry == 2 || this.carBuy.marry == 3 || this.carBuy.marry == 4) ? null : {
                    orderNo: _id,
                    customerName: this.carBuyCommon.name,
                    annexBatchNo: this.carBuyCommon.annexBatchNo,
                    idCard: this.carBuyCommon.code,
                    customerId: this.carBuyCommon.customerId ? this.carBuyCommon.customerId : '',
                    creditQueryApplyId: this.carBuyCommon.creditQueryApplyId,
                    bankName: this.carBuy.bankName ? this.carBuy.bankName : this.carBuy.bank,
                    bankId: this.$libs.jsonGetId(this.$store.state.bank, this.carBuy.bank),
                    bemarried: this.carBuyCommon.bemarried ? this.carBuyCommon.bemarried : '',
                    customerType: '2',
                },
                sponsor: sponsor.length > 0 ? sponsor : null
            };

            console.log(param);
            if (_isMust && !this.$libs.mustWrite(param)) {
                this.$store.commit('isAllMustFalse');
                this.$libs.noneAddHightBorder();
                return;
            } else if (_isMust) {
                // this.$store.commit('isAllMustTrue');
            }
            this.$http.post('/credit/updateCredit', param).then((data) => {
                if (data.data.success) {
                    this.id = _id;
                    this.orderStatus = _orderStatus;
                    if (_cb) {
                        _cb();
                    }
                    this.$store.commit('saveNumAdd', this, _id);
                } else {
                    this.$message.error(data.data.message);
                }
            }).catch((error) => {

            });
        },
        marryChanges(_data) {
            if (!this.carBuyCommon.name && (_data == 1 || _data == 0)) {
                this.marryChange = true;
                this.carBuyCommon.carBuyCommonAdd.push(1);
                let that = this;
                if (!this.carBuyCommon.annexBatchNo) {
                    this.$http.post('/annex/').then((data) => {
                        if (data.data.success) {
                            this.carBuyCommon.annexBatchNo = data.data.data.annexBatchNo;
                            this.$nextTick(() => {
                                that.$refs['carBuyCommon1'][0].isOne = this.isOne;
                                that.$refs['carBuyCommon1'][0].group = 2;
                                that.$refs['carBuyCommon1'][0].type = this.type;
                                that.$refs['carBuyCommon1'][0].id = this.carBuyCommon.annexBatchNo;

                                that.$refs['carBuyCommon2'][0].isOne = this.isOne;
                                that.$refs['carBuyCommon2'][0].group = 2;
                                that.$refs['carBuyCommon2'][0].type = this.type;
                                that.$refs['carBuyCommon2'][0].id = this.carBuyCommon.annexBatchNo;

                                that.$refs['carBuyCommon3'][0].isOne = this.isOne;
                                that.$refs['carBuyCommon3'][0].group = 2;
                                that.$refs['carBuyCommon3'][0].type = this.type;
                                that.$refs['carBuyCommon3'][0].id = this.carBuyCommon.annexBatchNo;

                                that.$refs['carBuyCommon4'][0].isOne = this.isOne;
                                that.$refs['carBuyCommon4'][0].group = 2;
                                that.$refs['carBuyCommon4'][0].type = this.type;
                                that.$refs['carBuyCommon4'][0].id = this.carBuyCommon.annexBatchNo;
                                console.log(that.$refs);
                            });
                        }
                    }).catch((error) => {

                    });
                }

            }
        }
    },
    mounted() {}
}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.credit {
    font-size: 14px;
    color: #475669;
    padding-top: 17px;
    .info {
        text-align: right;
        font-size: 12px;
        color: #666666;
        .text {
            color: #2A2A2A;
        }
    }

    .credit-imgs {
        padding: 0px 20px;
        text-align: left;
        font-size: 14px;
        color: #99A9BF;
        .credit-img-each {
            width: 150px;
            margin: 0 5px;
        }
        .credit-img {
            width: 140px;
        }
    }

    .credit-button-assure {
        margin-left: 14px;
        margin-top: 20px;
    }
}

</style>
